<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/vue-2.4.0.js"></script>
  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.3s ease;
    }
  </style>
</head>

<body>
<!--<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    &lt;!&ndash; 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 &ndash;&gt;
    <h3 v-if="flag">这是一个H3</h3>
  </div>-->


  <div id="demo">
    <button v-on:click="show = !show">
      Toggle
    </button>
    <transition>
      <p v-if="show">这是一个H3</p>
    </transition>
  </div>

<!--  <div id="app">
    <input type="button" value="toggle" @click="show = !show">
    <h3 v-if="show">ghaah</h3>
  </div>-->



  <script>
      /* new Vue({
        el: "#app",
        data: {
            show : false
        }
    })*/

      new Vue({
          el: '#demo',
          data: {
              show: false
          }
      })

    // 创建 Vue 实例，得到 ViewModel
/*  var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });*/
  </script>
</body>

</html>